<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">
      <span :class="{ home: isHome }">home</span>
    </el-breadcrumb-item>
    <el-breadcrumb-item
      v-for="item in routeMap"
      :key="item.path"
      :to="{ path: item.path }"
    >
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script lang="ts">
interface IRouteMap {
  path: string
  title: string
}
</script>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const routeMap = ref<IRouteMap[] | []>([])
const isHome = computed(() => !routeMap.value.length)

const getBreadcrumb = () => {
  const res = [] as IRouteMap[]
  const map = route.matched
  map.forEach(({ path, meta }) => {
    if (path === '/') return
    res.push({
      title: meta.title ?? path.slice(path.lastIndexOf('/') + 1),
      path
    })
  })

  routeMap.value = res
}

getBreadcrumb()
watch(() => route.matched, getBreadcrumb)
</script>

<style lang="scss" scoped>
.el-breadcrumb {
  line-height: inherit;
  margin-left: 15px;
  font-size: 16px;

  .home {
    font-weight: bold !important;
    color: #303133 !important;
  }
}
</style>